<template>
  <div class="app">
    <Header></Header>
    <div
      style="width: 100%; height: 100%"
      v-for="item in DetailInfo"
      :key="item.companyId"
    >
      <div class="first">
        <el-col :span="12">
          <div style="margin-top: 20px; margin-left: 220px">
            <div style="margin-bottom: 20px">
              <a style="color: #dee1e6; font-size: 16px">招聘中</a>
            </div>
            <div style="margin-bottom: 15px">
              <a style="color: #ffffff; font-size: 36px; letter-spacing: 2px">{{
                item.postName
              }}</a
              ><a
                style="
                  color: #5dd5c8;
                  font-size: 34px;
                  font-weight: 690;
                  margin-left: 20px;
                "
                >{{ item.post_salary }}</a
              >
            </div>
            <div
              style="
                color: #dee1e6;
                font-size: 16px;
                margin-bottom: 30px;
                letter-spacing: 2px;
              "
            >
              <a>{{ item.postCity }}</a
              ><a>·{{ item.postExperience }}</a
              ><a>·{{ item.postEducation }}</a>
            </div>
            <div>
              <el-button
                type="primary"
                plain
                icon="el-icon-star-off"
                style="font-size: 18px; margin-right: 10px"
                @click="collect()"
              >         {{flag==true?'不感兴趣':'感兴趣'}}</el-button
              ><el-button plain type="danger" style="font-size: 18px"
                >立 即 沟 通
              </el-button>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div style="margin-top: 80px; margin-left: 320px">
            <div>
              <el-button
                type="primary"
                plain
                round
                style="font-size: 18px; margin-bottom: 40px; margin-left: 2px"
                >五险一金</el-button
              >
              <el-button
                type="warning"
                plain
                round
                style="font-size: 18px; margin-bottom: 40px; margin-left: 15px"
                @click="open()"
                >用户反馈</el-button
              >
            </div>
            <!-- 用户反馈模块 抽屉弹出 -->
            <el-drawer
              title="我是标题"
              :visible.sync="drawer"
              :with-header="false"
            >
              <!-- 反馈内容 -->
              <el-form
                :model="ruleForm"
                ref="ruleForm"
                label-width="100px"
                class="demo-ruleForm"
              >
                <!-- 评分内容 -->
                <!--                      <el-form-item label="反馈内容">-->
                <!--                        <el-rate v-model="value" show-text style="margin-top: 12px;"></el-rate>-->
                <!--                      </el-form-item>-->
                <!-- 表格 -->
                <el-form-item label="反馈内容" prop="content">
                  <el-input
                    v-model.number="ruleForm.userComment"
                    type="textarea"
                    :rows="5"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="submitForm('ruleForm')"
                    >提交</el-button
                  >
                  <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
              </el-form>
            </el-drawer>
            <div>
              <i
                class="el-icon-document-checked"
                style="color: #409eff; letter-spacing: 2px; font-size: 17px"
                >填写在线简历</i
              >
            </div>
          </div>
        </el-col>
      </div>
      <div style="width: 100%; margin-top: 50px">
        <div style="padding-left: 150px; width: 75%">
          <el-col :span="16">
            <!-- <div><i class="el-icon-document-copy" style="color: #5DD5C8;"></i><a style="padding-left: 10px;">岗位职责</a></div>
            <div style="margin-bottom: 40px;"><p style="color:#61687c; line-height: 36px; font-size: 16px;">{{item.postAssignment}}</p></div>
            <div><i class="el-icon-document-copy" style="color: #5DD5C8;"></i><a style="padding-left: 10px;">任职要求</a></div>
            <div style="margin-bottom: 40px;"><p style="color:#61687c; line-height: 36px; font-size: 16px;">{{item.postRequest}}</p></div> -->
            <div style="margin-bottom: 40px">
              <p style="color: #61687c; line-height: 36px; font-size: 16px">
                {{ item.postInformation }}
              </p>
            </div>
            <div style="margin-bottom: 30px">
              <i class="el-icon-loading" style="color: #5dd5c8"></i
              ><a style="padding-left: 10px">竞争力分析</a>
            </div>
            <div>
              <el-progress
                type="circle"
                :percentage="75"
                style="margin-left: 20px"
              ></el-progress>
              <el-progress
                type="circle"
                :percentage="25"
                style="margin-left: 20px"
              ></el-progress>
              <el-progress
                type="circle"
                :percentage="100"
                status="success"
                style="margin-left: 20px"
              ></el-progress>
              <el-progress
                type="circle"
                :percentage="70"
                status="warning"
                style="margin-left: 20px"
              ></el-progress>
              <el-progress
                type="circle"
                :percentage="50"
                status="exception"
                style="margin-left: 20px"
              ></el-progress>
            </div>
            <div
              style="
                color: #61687c;
                line-height: 36px;
                font-size: 16px;
                letter-spacing: 2px;
              "
            >
              <a style="padding-left: 45px">专业技能</a
              ><a style="padding-left: 76px">就业经验</a
              ><a style="padding-left: 76px">岗位需求</a
              ><a style="padding-left: 76px">任职需求</a
              ><a style="padding-left: 62px">资料完整度</a>
            </div>
            <div class="security-box">
              <h3>安全提示</h3>
              <p>
                严禁用人单位做出任何损害求职者合法权益的违法违规行为，包括但不限于扣押求职者证件、收取求职者财物、向求职者集资、让求职者入股、诱导求职者异地入职、异地参与培训等，您一旦发现此类行为，<a
                  >请立即举报</a
                >
              </p>
            </div>
          </el-col>
          <!--          推荐模块-->
          <el-col :span="8">
            <div style="width: 100%; margin-left: 130px; padding-left: 30px">
              <div style="margin-bottom: 20px">
                <i class="el-icon-user" style="color: #5dd5c8"></i
                ><a style="padding-left: 10px">公司基本信息</a>
              </div>
              <div style="margin-bottom: 40px">
                <p style="font-size: 17px; padding-left: 10px">
                  {{ item.company_name }}
                </p>
              </div>
              <div style="margin-bottom: 20px">
                <i
                  class="el-icon-price-tag"
                  style="color: #5dd5c8; padding-right: 15px"
                ></i
                ><a style="font-size: 17px">{{ item.company_nature }}</a>
              </div>
              <div style="margin-bottom: 20px">
                <i
                  class="el-icon-s-custom"
                  style="color: #5dd5c8; padding-right: 15px"
                ></i
                ><a style="font-size: 17px">{{ item.company_scale }}</a>
              </div>
              <div style="margin-bottom: 60px">
                <i
                  class="el-icon-menu"
                  style="color: #5dd5c8; padding-right: 15px"
                ></i
                ><a style="font-size: 17px">{{ item.company_category }}</a>
              </div>
              <div style="margin-bottom: 20px">
                <i
                  class="el-icon-bell"
                  style="color: #5dd5c8; padding-bottom: 20px"
                ></i
                ><a style="padding-left: 10px">相似职位</a>
              </div>
              <div v-for="item in recommendList" :key="item.company_id">
                <el-row :gutter="20">
                  <el-col :span="16">
                    <div style="margin-bottom: 5px" class="recommend">
                      <a style="font-size: 17px">{{ item.rec_job }}</a>
                    </div>
                    <div style="margin-bottom: 10px">
                      <a style="font-size: 17px; color: #fc703e">{{
                        item.rec_salary
                      }}</a>
                    </div>
                    <div style="margin-bottom: 50px">
                      <a style="font-size: 17px; color: #8d92a1"
                        >{{ item.rec_company }} · {{ item.rec_city }}</a
                      >
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div>
                      <img
                        :src="item.company_img"
                        alt=""
                        style="width: 80px; border-radius: 40px"
                      />
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from '@/components/Header'
import Footer from '@/components/Footer'

export default {
  name: 'SearchDetail',
  components: {
    Header,
    Footer,
  },
  data() {
    return {
      drawer: false,
      direction: 'rtl',
      content: '',
      value: null, // 评分
      flag: false,
      DetailInfo: [],
      recommendList: [
        {
          company_img:
            'https://img.bosszhipin.com/beijin/mcs/chatphoto/20160520/c8f8f07e62f543b5f449dbc519bb14da283da221ddeab94737303af457520dc0.jpg?x-oss-process=image/resize,w_100,limit_0',
          company_id: 1,
          rec_job: 'WedAR&AR小程序前端开发',
          rec_salary: '8-13K',
          rec_company: '映尚科技',
          rec_city: '南昌',
        },
        {
          company_img:
            'https://img.bosszhipin.com/beijin/mcs/chatphoto/20201117/9e01fd5d65c81a332e5e47ae0ee575155b5d53c8d16eb634483c07a2a1294204_s.jpg?x-oss-process=image/resize,w_100,limit_0',
          company_id: 2,
          rec_job: 'Java开发工程师 ',
          rec_salary: '10-15K',
          rec_company: '神州信息',
          rec_city: '南昌',
        },
        {
          company_img:
            'https://img.bosszhipin.com/beijin/mcs/chatphoto/20201224/99d0d73240d08898dfbde3c9a9fcdba50b8761a367a61b7361fbe4147480ca47_s.jpg?x-oss-process=image/resize,w_100,limit_0',
          company_id: 3,
          rec_job: '基带开发工程师（穿戴）',
          rec_salary: '10-15K',
          rec_company: '华勤技术股份有限公司',
          rec_city: '南昌',
        },
        {
          company_img:
            'https://img.bosszhipin.com/beijin/mcs/chatphoto/20160520/c8f8f07e62f543b5f449dbc519bb14da283da221ddeab94737303af457520dc0.jpg?x-oss-process=image/resize,w_100,limit_0',
          company_id: 4,
          rec_job: 'WedAR&AR小程序前端开发',
          rec_salary: '8-13K',
          rec_company: '映尚科技',
          rec_city: '南昌',
        },
        {
          company_img:
            'https://img.bosszhipin.com/beijin/mcs/chatphoto/20201224/99d0d73240d08898dfbde3c9a9fcdba50b8761a367a61b7361fbe4147480ca47_s.jpg?x-oss-process=image/resize,w_100,limit_0',
          company_id: 5,
          rec_job: '基带开发工程师（穿戴）',
          rec_salary: '10-15K',
          rec_company: '华勤技术股份有限公司',
          rec_city: '南昌',
        },
      ],
      ruleForm: {
        userComment: '',
        userId: '',
        companyId: '',
      },
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      var that = this
      that.$http
        .post('company/details', { companyId: that.$route.query.companyId })
        .then(function (res) {
          if (res.data.code == 200) {
            that.DetailInfo.push(res.data.data)
            if(res.data.data.userCollectId!=null){
              that.flag = true;
              that.ruleForm.userCollectId = res.data.data.userCollectId;
            } else{
              that.flag = false;
            }
          } else {
            return that.$message.error('查询失败！')
          }
        })
    },
    // // 抽屉开关
    // handleClose (done) {
    //   this.$confirm('确认关闭？')
    //     .then(_ => {
    //       done()
    //     })
    //     .catch(_ => {})
    // },
    // 提交反馈
    submitForm(formName) {
      if (
        this.ruleForm.userComment == null ||
        this.ruleForm.userComment.trim() == ''
      ) {
        this.$message.error('请填写反馈内容')
        return
      }
      var that = this
      that.$http.post('comment/insert', that.ruleForm).then(function (res) {
        if (res.data.code == 200) {
          that.drawer = false
          return that.$message.success('反馈成功!')
        } else {
          return that.$message.error('反馈失败！')
        }
      })
    },
    open() {
      var form = JSON.parse(window.sessionStorage.getItem('user'))
      if (form == null || form == '') {
        this.$message.error('请先登陆')
      } else {
        this.drawer = true
        this.ruleForm.userId = form.userId
        this.ruleForm.companyId = this.$route.query.companyId
      }
    },
    collect() {
      var form = JSON.parse(window.sessionStorage.getItem('user'))
      if (form == null || form == '') {
        this.$message.error('请先登陆')
      } else {
        this.ruleForm.userId = form.userId
        this.ruleForm.companyId = this.$route.query.companyId
        var that = this
        if(that.flag ==true){
        that.$http.post('collect/delete', that.ruleForm).then(function (res) {
          if (res.data.code == 200) {
            that.flag = true
            return that.$message.success('操作成功!')
          } else {
            return that.$message.error('操作失败！')
          }
        })
        } else{
          that.$http.post('collect/insert', that.ruleForm).then(function (res) {
          if (res.data.code == 200) {
            that.flag = true
            return that.$message.success('操作成功!')
          } else {
            return that.$message.error('操作失败！')
          }
        })
        }
      }
    },
    // 重置
    resetForm() {
      const that = this
      that.ruleForm.content = null
    },
  },
}
</script>

<style lang="less" scoped>
.app {
  width: 100%;
  height: 100%;
}
.first {
  width: 100%;
  height: 250px;
  background-color: #424a61;
}
.security-box {
  margin: 40px 0;
  border: 1px solid rgba(223, 224, 228, 1);
  padding: 30px 20px 20px;
  background-size: 116px 83px;
}
.security-box h3 {
  font-size: 18px;
  font-weight: 400;
  color: rgba(67, 125, 242, 1);
  line-height: 16px;
  padding-bottom: 10px;
}
.security-box p {
  position: relative;
  padding-left: 6px;
  font-size: 18px;
}
.recommend a:hover {
  color: #00d7c6;
}
.demo-ruleForm {
  width: 100%;
  margin-top: 50px;
  padding-right: 30px;
}
</style>
